import {
  View,
  Text,
  StyleSheet,
  TextInput,
  Dimensions,
  Button,
  Alert,
} from 'react-native';
import React, {useState} from 'react';

const TextInputCom = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [phone, setPhone] = useState('');
  const [email, setEmail] = useState('');
  doLogin = () => {
    Alert.alert(username);
  };
  return (
    <View style={style.container}>
      <TextInput
        style={style.textInput}
        placeholder="请输入用户名"
        value={username}
        onChangeText={val => {
          setUsername(val);
        }}
      />
      <TextInput
        style={style.textInput}
        placeholder="请输入密码"
        value={password}
        secureTextEntry={true}
        onChangeText={val => {
          setPassword(val);
        }}
      />
      <TextInput
        style={style.textInput}
        placeholder="手机号"
        keyboardType="number-pad"
        value={phone}
        onChangeText={val => {
          setPhone(val);
        }}
      />
      <TextInput
        style={style.textInput}
        placeholder="请输入自我介绍"
        multiline={true}
        numberOfLines={5}
        textAlignVertical="top"
        value={email}
        onChangeText={val => {
          setEmail(val);
        }}
      />

      <View>
        <Button title="登录" onPress={doLogin} />
      </View>
    </View>
  );
};

const style = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  textInput: {
    width: Dimensions.get('window').width - 20,
    // height: 40, 如果设置高度则会导致 textinput的 numberOfLines 设置的行数无效
    borderWidth: 1,
    borderColor: 'black',
    paddingHorizontal: 10,
    margin: 10,
  },
});
export default TextInputCom;
